/**
 * Created with JetBrains WebStorm.
 * User: Tao
 * Date: 13-3-19
 * Time: 下午12:39
 * To change this template use File | Settings | File Templates.
 */
Ext.application({

    name:'Demo',

    launch:function(){

        //定义数据模型
        Ext.define('User',{
            extend:'Ext.data.Model',
            config:{
                fields:['firstName','lastName']
            }
        });

        var store = Ext.create('Ext.data.Store',{

            model:'User',
            data:[
                {firstName:'三丰',lastName:'张'},
                {firstName:'莫愁',lastName:'李'},
                {firstName:'昭君',lastName:'王'},
                {firstName:'共鸣',lastName:'赵'},
                {firstName:'无忌',lastName:'张'},
                {firstName:'语嫣',lastName:'李'},
                {firstName:'飞燕',lastName:'王'},
                {firstName:'天师',lastName:'赵'},
                {firstName:'时政',lastName:'张'},
                {firstName:'敏',lastName:'王'}
            ]
        });

        var panel = Ext.create('Ext.Panel',{
            docked:'top',
            layout:'hbox',
            items:[
                {
                    baseCls:'title',
                    html:'姓'
                },{
                    baseCls:'title',
                    html:'名'
                }
            ]
        });

        function sortTable(){

            sort = Ext.ComponentManager.get("sel_sort").getValue();
            if(sort != ""){
                store.sort({
                    property:sort.split('-')[0],
                    direction:sort.split('-')[1]
//                    transform:function(value){
//                        return getSpell(value,value);
//                    }
                })
            }
        };

        function searchTable(){
            store.clearFilter();
            var value = Ext.ComponentManager.get('search_lastname').getValue();

            if(value != ""){
                store.filter('lastName',value);
                value = Ext.ComponentManager.get('search_firstname').getValue();
//                Ext.Msg.alert(value);
                if(value != ""){
                    store.filter('firstName',value);
                }
            }
        }

        var toolbar = new Ext.Toolbar({

            docked:'top',
            height:'160',
            layout:{
                type:'vbox'
            },
            items:[
                {
                  xtype:'searchfield',
                  id:'search_lastname',
                  name:'search_lastname',
                  placeHolder:'请输入检索用户姓',
                  listeners:{
                      change:function(){
                          searchTable();
                      }
                  }
                },
                {
                    xtype:'searchfield',
                    id:'search_firstname',
                    name:'search_firstname',
                    placeHolder:'请输入检索用户名',
                    listeners:{
                        change:function(){
                            searchTable();
                        }
                    }
                },
                {
                    xtype:'selectfield',
                    id:'sel_sort',
                    name:'sort',
                    displayField:'text',
                    valueField:'value',
                    options:[
                        {
                            text:'选择排序方式',
                            value:''
                        },
                        {
                            text:'按姓升序排列',
                            value:'lastName-asc'
                        },
                        {
                            text:'按姓降序序排列',
                            value:'lastName-desc'
                        },
                        {
                            text:'按名升序序排列',
                            value:'firstName-asc'
                        },
                        {
                            text:'按名降序序排列',
                            value:'firstName-desc'
                        }
                    ],
                    listeners:{
                        change:function(){

                            sortTable();
                        }
                    }
                }
            ]
        });
        var dataview = Ext.create('Ext.DataView',{

            fullscreen:true,
            store:store,
            baseCls:'user',
            items:[toolbar,panel],
            itemTpl:'<div>{lastName}</div><div>{firstName}</div>'
        });
        var mainPanel = Ext.create('Ext.Panel',{

            layout:'fit',
            items:'dataview'
        });
        Ext.Viewport.add(mainPanel);
    }
});